﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctx}/common/common.css" media="all">
    <script src="${ctx}/common/plugins/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>
    
    <style type="text/css">
        .rowtop {
            padding: 10px;
        }

        .file-preview {
            display:inline-block;
        }

        .file-item {
            position: relative;
            width: 100px;
            height: 120px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            padding: 5px;
            text-align: center;
            background: #f8f8f8;
        }

        .file-icon {
            font-size: 40px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .file-icon.img {
            color: #e74c3c;
        }

        .file-icon.excel {
            color: #27ae60;
        }

        .file-icon.pdf {
            color: #e67e22;
        }

        .file-icon.word {
            color: #3498db;
        }

        .file-icon.other {
            color: #7f8c8d;
        }

        .file-name {
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: 5px;
        }

        .file-remove {
            position: absolute;
            top: -8px;
            right: -8px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #ff5722;
            color: white;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
            font-size: 12px;
            display: none;
        }

        .file-item:hover .file-remove {
            display: block;
        }

        .upload-status {
            margin-top: 10px;
            font-size: 13px;
            color: #666;
        }

        .upload-btn-group {
            margin-top: 15px;
        }

        .supported-types {
            margin-top: 10px;
            font-size: 13px;
            color: #666;
        }

        .file-preview-img {
            max-width: 100px;
            max-height: 70px;
            object-fit: contain;
        }
    </style>
</head>
<body>
<form class="layui-form layui-container" method="post" action="${ctx}/enterprise/${action}" enctype="multipart/form-data" style="background-color: white;">
    <input type="hidden" name="id" value="${entity.id}" />
    <input type="hidden" name="companyId" value="${companyId}" />
    <div class="layui-row rowtop">
        <div class="layui-col-md5">
            <label class="layui-form-label">品名<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input type="text" name="productName" required value="${entity.productName}" lay-verify="required" placeholder="请输入品名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md5">
            <label class="layui-form-label">批准文号<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input type="text" name="approvalNumber" lay-verify="required" value="${entity.approvalNumber}" placeholder="请输入批准文号" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-row rowtop">
        <div class="layui-col-md5">
            <label class="layui-form-label">规格<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input type="text" name="specification" required value="${entity.specification}" lay-verify="required" placeholder="请输入规格" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md5">
            <label class="layui-form-label">剂型<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input type="text" name="dosageForm" lay-verify="required" value="${entity.dosageForm}" placeholder="请输入剂型" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-row rowtop">
        <div class="layui-col-md5">
            <label class="layui-form-label">保健功能<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input type="text" name="healthFunction" required value="${entity.healthFunction}" lay-verify="required" placeholder="请输入保健功能" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md5">
            <label class="layui-form-label">企业标准<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input type="text" name="enterpriseStandard" lay-verify="required" value="${entity.enterpriseStandard}" placeholder="请输入企业标准" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-row rowtop">
        <div class="layui-col-md5">
            <label class="layui-form-label">申报材料<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input type="text" name="applicationMaterials" required value="${entity.applicationMaterials}" lay-verify="required" placeholder="请输入申报材料" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md5">
            <label class="layui-form-label">变更情况<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input type="text" name="revisionStatus" lay-verify="required" value="${entity.revisionStatus}" placeholder="请输入变更情况" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-row rowtop">
        <div class="layui-col-md5">
            <label class="layui-form-label">在产产品型式检验报告<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input type="file" name="typeReportFile" id="typeReportFile" style="display: none;"
                        accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xls,.xlsx">
                <button type="button" class="layui-btn" id="typeReportUpload">
                    <i class="layui-icon">&#xe67c;</i>选择文件
                </button>
                <div class="file-preview" id="typeReportPreview">
                    <c:if test="${!empty entity.typeReport && fn:length(entity.typeReport)>0 && entity.typeReport != 'null'}">
                        <div class="file-item">
                            <div class="file-remove" onclick="removeTypeReportFile()"><i
                                    class="layui-icon">&#x1006;</i></div>

                                    <div class="file-icon">
                                        <c:choose>
                                            <c:when test="${!empty typeReportFileInfo && typeReportFileInfo.exists == true && typeReportFileInfo.fileType == 'image'}">
                                                <img src="${ctx}/files/${typeReportFileInfo.serverFileName}"
                                                     class="file-preview-img"
                                                     onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                                                <div style="display:none; color: #999; font-size: 12px;">图片加载失败
                                                </div>
                                            </c:when>
                                            <c:when test="${!empty typeReportFileInfo && typeReportFileInfo.exists == true && typeReportFileInfo.fileType == 'excel'}">
                                                <i class="fas fa-file-excel excel"></i>
                                            </c:when>
                                            <c:when test="${!empty typeReportFileInfo && typeReportFileInfo.exists == true && typeReportFileInfo.fileType == 'pdf'}">
                                                <div class="file-icon pdf">
                                                    <i class="fas fa-file-pdf "></i>
                                                </div>
                                            </c:when>
                                            <c:when test="${!empty typeReportFileInfo && typeReportFileInfo.exists == true && typeReportFileInfo.fileType == 'word'}">
                                                <i class="fas fa-file-word word"></i>
                                            </c:when>
                                            <c:when test="${!empty typeReportFileInfo && typeReportFileInfo.exists == true && typeReportFileInfo.fileType == 'text'}">
                                                <i class="fas fa-file-alt text"></i>
                                            </c:when>
                                            <c:when test="${!empty typeReportFileInfo && typeReportFileInfo.exists == true}">
                                                <i class="fas fa-file other"></i>
                                            </c:when>
                                            <c:when test="${!empty typeReportFileInfo && typeReportFileInfo.exists == false}">
                                                <i class="fas fa-exclamation-triangle" style="color: #ff5722;"></i>
                                            </c:when>
                                            <c:otherwise>
                                                <c:choose>
                                                    <c:when test="${fn:endsWith(entity.typeReport, '.jpg') || fn:endsWith(entity.typeReport, '.png') || fn:endsWith(entity.typeReport, '.gif')}">
                                                        <c:set var="fileName" value="${fn:substringAfter(entity.typeReport, '/files/')}" />
                                                        <img src="${ctx}/files/${fileName}"
                                                             class="file-preview-img"
                                                             onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                                                        <div style="display:none; color: #999; font-size: 12px;">
                                                            图片加载失败
                                                        </div>
                                                    </c:when>
                                                    <c:when test="${fn:endsWith(entity.typeReport, '.xls') || fn:endsWith(entity.typeReport, '.xlsx')}">
                                                        <i class="fas fa-file-excel excel"></i>
                                                    </c:when>
                                                    <c:when test="${fn:endsWith(entity.typeReport, '.pdf')}">
                                                        <div class="file-icon pdf">
                                                            <i class="fas fa-file-pdf "></i>
                                                        </div>
                                                    </c:when>
                                                    <c:when test="${fn:endsWith(entity.typeReport, '.doc') || fn:endsWith(entity.typeReport, '.docx')}">
                                                        <i class="fas fa-file-word word"></i>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <i class="fas fa-file other"></i>
                                                    </c:otherwise>
                                                </c:choose>
                                            </c:otherwise>
                                        </c:choose>
                                    </div>
                                    <div class="file-name"
                                         title="${!empty typeReportFileInfo ? typeReportFileInfo.fileName : '已上传文件'}">
                                        <c:choose>
                                            <c:when test="${!empty typeReportFileInfo && typeReportFileInfo.exists == true && typeReportFileInfo.fileName != null}">
                                                ${typeReportFileInfo.fileName}
                                            </c:when>
                                            <c:when test="${!empty typeReportFileInfo && typeReportFileInfo.exists == false}">
                                                <span style="color: #ff5722;">${typeReportFileInfo.fileName}</span>
                                            </c:when>
                                            <c:otherwise>
                                                已上传文件
                                            </c:otherwise>
                                        </c:choose>
                                    </div>
                                    <c:if test="${!empty typeReportFileInfo && typeReportFileInfo.exists == true && typeReportFileInfo.fileSize != null}">
                                        <div class="file-size" style="font-size: 10px; color: #999; margin-top: 2px;">
                                            <c:choose>
                                                <c:when test="${typeReportFileInfo.fileSize > 1048576}">
                                                    <fmt:formatNumber value="${typeReportFileInfo.fileSize / 1048576.0}"
                                                                      maxFractionDigits="1"/>MB
                                                </c:when>
                                                <c:when test="${typeReportFileInfo.fileSize > 1024}">
                                                    <fmt:formatNumber value="${typeReportFileInfo.fileSize / 1024.0}"
                                                                      maxFractionDigits="1"/>KB
                                                </c:when>
                                                <c:otherwise>
                                                    ${typeReportFileInfo.fileSize}B
                                                </c:otherwise>
                                            </c:choose>
                                        </div>
                                    </c:if>
                        </div>
                    </c:if>
                </div>
            </div>
        </div>
        <div class="layui-col-md5">
            <label class="layui-form-label">在产产品的批次检验报告<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input type="file" name="batchReportFile" id="batchReportFile" style="display: none;"
                        accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xls,.xlsx">
                <button type="button" class="layui-btn" id="batchReportUpload">
                    <i class="layui-icon">&#xe67c;</i>选择文件
                </button>
                <div class="file-preview" id="batchReportPreview">
                    <c:if test="${!empty entity.batchReport && fn:length(entity.batchReport)>0 && entity.batchReport != 'null'}">
                        <div class="file-item">
                            <div class="file-remove" onclick="removeBatchReportFile()"><i
                                    class="layui-icon">&#x1006;</i></div>

                                    <div class="file-icon">
                                        <c:choose>
                                            <c:when test="${!empty batchReportFileInfo && batchReportFileInfo.exists == true && batchReportFileInfo.fileType == 'image'}">
                                                <img src="${ctx}/files/${batchReportFileInfo.serverFileName}"
                                                     class="file-preview-img"
                                                     onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                                                <div style="display:none; color: #999; font-size: 12px;">图片加载失败
                                                </div>
                                            </c:when>
                                            <c:when test="${!empty batchReportFileInfo && batchReportFileInfo.exists == true && batchReportFileInfo.fileType == 'excel'}">
                                                <i class="fas fa-file-excel excel"></i>
                                            </c:when>
                                            <c:when test="${!empty batchReportFileInfo && batchReportFileInfo.exists == true && batchReportFileInfo.fileType == 'pdf'}">
                                                <div class="file-icon pdf">
                                                    <i class="fas fa-file-pdf "></i>
                                                </div>
                                            </c:when>
                                            <c:when test="${!empty batchReportFileInfo && batchReportFileInfo.exists == true && batchReportFileInfo.fileType == 'word'}">
                                                <i class="fas fa-file-word word"></i>
                                            </c:when>
                                            <c:when test="${!empty batchReportFileInfo && batchReportFileInfo.exists == true && batchReportFileInfo.fileType == 'text'}">
                                                <i class="fas fa-file-alt text"></i>
                                            </c:when>
                                            <c:when test="${!empty batchReportFileInfo && batchReportFileInfo.exists == true}">
                                                <i class="fas fa-file other"></i>
                                            </c:when>
                                            <c:when test="${!empty batchReportFileInfo && batchReportFileInfo.exists == false}">
                                                <i class="fas fa-exclamation-triangle" style="color: #ff5722;"></i>
                                            </c:when>
                                            <c:otherwise>
                                                <c:choose>
                                                    <c:when test="${fn:endsWith(entity.batchReport, '.jpg') || fn:endsWith(entity.batchReport, '.png') || fn:endsWith(entity.batchReport, '.gif')}">
                                                        <c:set var="fileName" value="${fn:substringAfter(entity.batchReport, '/files/')}" />
                                                        <img src="${ctx}/files/${fileName}"
                                                             class="file-preview-img"
                                                             onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                                                        <div style="display:none; color: #999; font-size: 12px;">
                                                            图片加载失败
                                                        </div>
                                                    </c:when>
                                                    <c:when test="${fn:endsWith(entity.batchReport, '.xls') || fn:endsWith(entity.batchReport, '.xlsx')}">
                                                        <i class="fas fa-file-excel excel"></i>
                                                    </c:when>
                                                    <c:when test="${fn:endsWith(entity.batchReport, '.pdf')}">
                                                        <div class="file-icon pdf">
                                                            <i class="fas fa-file-pdf "></i>
                                                        </div>
                                                    </c:when>
                                                    <c:when test="${fn:endsWith(entity.batchReport, '.doc') || fn:endsWith(entity.batchReport, '.docx')}">
                                                        <i class="fas fa-file-word word"></i>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <i class="fas fa-file other"></i>
                                                    </c:otherwise>
                                                </c:choose>
                                            </c:otherwise>
                                        </c:choose>
                                    </div>
                                    <div class="file-name"
                                         title="${!empty batchReportFileInfo ? batchReportFileInfo.fileName : '已上传文件'}">
                                        <c:choose>
                                            <c:when test="${!empty batchReportFileInfo && batchReportFileInfo.exists == true && batchReportFileInfo.fileName != null}">
                                                ${batchReportFileInfo.fileName}
                                            </c:when>
                                            <c:when test="${!empty batchReportFileInfo && batchReportFileInfo.exists == false}">
                                                <span style="color: #ff5722;">${batchReportFileInfo.fileName}</span>
                                            </c:when>
                                            <c:otherwise>
                                                已上传文件
                                            </c:otherwise>
                                        </c:choose>
                                    </div>
                                    <c:if test="${!empty batchReportFileInfo && batchReportFileInfo.exists == true && batchReportFileInfo.fileSize != null}">
                                        <div class="file-size" style="font-size: 10px; color: #999; margin-top: 2px;">
                                            <c:choose>
                                                <c:when test="${batchReportFileInfo.fileSize > 1048576}">
                                                    <fmt:formatNumber value="${batchReportFileInfo.fileSize / 1048576.0}"
                                                                      maxFractionDigits="1"/>MB
                                                </c:when>
                                                <c:when test="${batchReportFileInfo.fileSize > 1024}">
                                                    <fmt:formatNumber value="${batchReportFileInfo.fileSize / 1024.0}"
                                                                      maxFractionDigits="1"/>KB
                                                </c:when>
                                                <c:otherwise>
                                                    ${batchReportFileInfo.fileSize}B
                                                </c:otherwise>
                                            </c:choose>
                                        </div>
                                    </c:if>
                        </div>
                    </c:if>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row rowtop">
        <div class="layui-col-md5">
            <label class="layui-form-label">包装图片<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input type="file" name="packagingImgFile" id="packagingImgFile" style="display: none;"
                        accept=".jpg,.jpeg,.png,.gif,.bmp,.webp">
                <button type="button" class="layui-btn" id="packagingImgUpload">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <div class="file-preview" id="packagingImgPreview">
                    <c:if test="${!empty entity.packagingImg && fn:length(entity.packagingImg)>0 && entity.packagingImg != 'null'}">
                        <div class="file-item">
                            <div class="file-remove" onclick="removePackagingImgFile()"><i
                                    class="layui-icon">&#x1006;</i></div>

                                    <div class="file-icon">
                                        <c:choose>
                                            <c:when test="${!empty packagingImgFileInfo && packagingImgFileInfo.exists == true && packagingImgFileInfo.fileType == 'image'}">
                                                <img src="${ctx}/files/${packagingImgFileInfo.serverFileName}"
                                                     class="file-preview-img"
                                                     onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                                                <div style="display:none; color: #999; font-size: 12px;">图片加载失败
                                                </div>
                                            </c:when>
                                            <c:when test="${!empty packagingImgFileInfo && packagingImgFileInfo.exists == true && packagingImgFileInfo.fileType == 'excel'}">
                                                <i class="fas fa-file-excel excel"></i>
                                            </c:when>
                                            <c:when test="${!empty packagingImgFileInfo && packagingImgFileInfo.exists == true && packagingImgFileInfo.fileType == 'pdf'}">
                                                <div class="file-icon pdf">
                                                    <i class="fas fa-file-pdf "></i>
                                                </div>
                                            </c:when>
                                            <c:when test="${!empty packagingImgFileInfo && packagingImgFileInfo.exists == true && packagingImgFileInfo.fileType == 'word'}">
                                                <i class="fas fa-file-word word"></i>
                                            </c:when>
                                            <c:when test="${!empty packagingImgFileInfo && packagingImgFileInfo.exists == true && packagingImgFileInfo.fileType == 'text'}">
                                                <i class="fas fa-file-alt text"></i>
                                            </c:when>
                                            <c:when test="${!empty packagingImgFileInfo && packagingImgFileInfo.exists == true}">
                                                <i class="fas fa-file other"></i>
                                            </c:when>
                                            <c:when test="${!empty packagingImgFileInfo && packagingImgFileInfo.exists == false}">
                                                <i class="fas fa-exclamation-triangle" style="color: #ff5722;"></i>
                                            </c:when>
                                            <c:otherwise>
                                                <c:choose>
                                                    <c:when test="${fn:endsWith(entity.packagingImg, '.jpg') || fn:endsWith(entity.packagingImg, '.png') || fn:endsWith(entity.packagingImg, '.gif')}">
                                                        <c:set var="fileName" value="${fn:substringAfter(entity.packagingImg, '/files/')}" />
                                                        <img src="${ctx}/files/${fileName}"
                                                             class="file-preview-img"
                                                             onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                                                        <div style="display:none; color: #999; font-size: 12px;">
                                                            图片加载失败
                                                        </div>
                                                    </c:when>
                                                    <c:when test="${fn:endsWith(entity.packagingImg, '.xls') || fn:endsWith(entity.packagingImg, '.xlsx')}">
                                                        <i class="fas fa-file-excel excel"></i>
                                                    </c:when>
                                                    <c:when test="${fn:endsWith(entity.packagingImg, '.pdf')}">
                                                        <div class="file-icon pdf">
                                                            <i class="fas fa-file-pdf "></i>
                                                        </div>
                                                    </c:when>
                                                    <c:when test="${fn:endsWith(entity.packagingImg, '.doc') || fn:endsWith(entity.packagingImg, '.docx')}">
                                                        <i class="fas fa-file-word word"></i>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <i class="fas fa-file other"></i>
                                                    </c:otherwise>
                                                </c:choose>
                                            </c:otherwise>
                                        </c:choose>
                                    </div>
                                    <div class="file-name"
                                         title="${!empty packagingImgFileInfo ? packagingImgFileInfo.fileName : '已上传文件'}">
                                        <c:choose>
                                            <c:when test="${!empty packagingImgFileInfo && packagingImgFileInfo.exists == true && packagingImgFileInfo.fileName != null}">
                                                ${packagingImgFileInfo.fileName}
                                            </c:when>
                                            <c:when test="${!empty packagingImgFileInfo && packagingImgFileInfo.exists == false}">
                                                <span style="color: #ff5722;">${packagingImgFileInfo.fileName}</span>
                                            </c:when>
                                            <c:otherwise>
                                                已上传文件
                                            </c:otherwise>
                                        </c:choose>
                                    </div>
                                    <c:if test="${!empty packagingImgFileInfo && packagingImgFileInfo.exists == true && packagingImgFileInfo.fileSize != null}">
                                        <div class="file-size" style="font-size: 10px; color: #999; margin-top: 2px;">
                                            <c:choose>
                                                <c:when test="${packagingImgFileInfo.fileSize > 1048576}">
                                                    <fmt:formatNumber value="${packagingImgFileInfo.fileSize / 1048576.0}"
                                                                      maxFractionDigits="1"/>MB
                                                </c:when>
                                                <c:when test="${packagingImgFileInfo.fileSize > 1024}">
                                                    <fmt:formatNumber value="${packagingImgFileInfo.fileSize / 1024.0}"
                                                                      maxFractionDigits="1"/>KB
                                                </c:when>
                                                <c:otherwise>
                                                    ${packagingImgFileInfo.fileSize}B
                                                </c:otherwise>
                                            </c:choose>
                                        </div>
                                    </c:if>
                        </div>
                    </c:if>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" id="formBtn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            <button type="button" id="rollback" class="layui-btn layui-btn-primary">返回</button>
        </div>
    </div>
</form>

<script>
    // 使用 Layui 的表单模块和layer模块
    layui.use(['form', 'layer'], function() {
        var form = layui.form;
        var layer = layui.layer;

        // 监听表单提交
        form.on('submit(formDemo)', function(data) {
            // 验证必填字段
            var productName = $('input[name="productName"]').val();
            var approvalNumber = $('input[name="approvalNumber"]').val();
            var specification = $('input[name="specification"]').val();
            var dosageForm = $('input[name="dosageForm"]').val();
            var healthFunction = $('input[name="healthFunction"]').val();
            var enterpriseStandard = $('input[name="enterpriseStandard"]').val();
            var applicationMaterials = $('input[name="applicationMaterials"]').val();
            var revisionStatus = $('input[name="revisionStatus"]').val();
            
            // 检查必填字段
            if (!productName || !approvalNumber || !specification || !dosageForm || 
                !healthFunction || !enterpriseStandard || !applicationMaterials || !revisionStatus) {
                layer.msg('请填写所有必填字段！', {icon: 2});
                return false;
            }
            
            // 检查是否至少上传了一个文件
            var hasTypeReport = $('#typeReportFile')[0].files.length > 0 || $('#typeReportPreview .file-item').length > 0;
            var hasBatchReport = $('#batchReportFile')[0].files.length > 0 || $('#batchReportPreview .file-item').length > 0;
            var hasPackagingImg = $('#packagingImgFile')[0].files.length > 0 || $('#packagingImgPreview .file-item').length > 0;
            
            if (!hasTypeReport || !hasBatchReport || !hasPackagingImg) {
                layer.msg('请上传所有必需的文件和图片！', {icon: 2});
                return false;
            }
            
            // 显示加载动画
            var loadIndex = layer.load(1, {
                shade: [0.1, '#fff'] // 0.1透明度的白色背景
            });
            
            // 禁用提交按钮，防止重复提交
            $("#formBtn").attr("disabled", true);
            
            // 手动提交表单
            var formElement = document.querySelector('form');
            formElement.submit();
            
            // 返回false阻止默认提交行为，因为我们已经手动提交了
            return false;
        });
    });
    
    // 文件选择功能
    $(document).ready(function() {
        // 在产产品型式检验报告文件选择
        $('#typeReportUpload').click(function() {
            $('#typeReportFile').click();
        });
        
        $('#typeReportFile').change(function() {
            var file = this.files[0];
            if (file) {
                // 显示文件预览
                $("#typeReportPreview").html('');
                var fileIcon = 'other';
                var iconClass = 'fas fa-file';

                if (file.type.indexOf('image') !== -1) {
                    // 如果是图片，显示图片预览
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $("#typeReportPreview").append('<div class="file-item">' +
                            '<div class="file-remove" onclick="clearTypeReportFile()"><i class="layui-icon">&#x1006;</i></div>' +
                            '<div class="file-icon"><img src="' + e.target.result + '" class="file-preview-img"></div>' +
                            '<div class="file-name" title="' + file.name + '">' + file.name + '</div>' +
                            '</div>');
                    };
                    reader.readAsDataURL(file);
                } else {
                    // 根据文件类型显示对应图标
                    if (file.name.endsWith('.xls') || file.name.endsWith('.xlsx') || file.type.indexOf('spreadsheet') !== -1) {
                        fileIcon = 'excel';
                        iconClass = 'fas fa-file-excel';
                    } else if (file.name.endsWith('.pdf') || file.type.indexOf('pdf') !== -1) {
                        fileIcon = 'pdf';
                        iconClass = 'fas fa-file-pdf';
                    } else if (file.name.endsWith('.doc') || file.name.endsWith('.docx') || file.type.indexOf('word') !== -1) {
                        fileIcon = 'word';
                        iconClass = 'fas fa-file-word';
                    }

                    $("#typeReportPreview").append('<div class="file-item">' +
                        '<div class="file-remove" onclick="clearTypeReportFile()"><i class="layui-icon">&#x1006;</i></div>' +
                        '<div class="file-icon ' + fileIcon + '"><i class="' + iconClass + '"></i></div>' +
                        '<div class="file-name" title="' + file.name + '">' + file.name + '</div>' +
                        '</div>');
                }
            }
        });
        
        // 在产产品的批次检验报告文件选择
        $('#batchReportUpload').click(function() {
            $('#batchReportFile').click();
        });
        
        // 包装图片文件选择
        $('#packagingImgUpload').click(function() {
            $('#packagingImgFile').click();
        });
        
        $('#batchReportFile').change(function() {
            var file = this.files[0];
            if (file) {
                // 显示文件预览
                $("#batchReportPreview").html('');
                var fileIcon = 'other';
                var iconClass = 'fas fa-file';

                if (file.type.indexOf('image') !== -1) {
                    // 如果是图片，显示图片预览
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $("#batchReportPreview").append('<div class="file-item">' +
                            '<div class="file-remove" onclick="clearBatchReportFile()"><i class="layui-icon">&#x1006;</i></div>' +
                            '<div class="file-icon"><img src="' + e.target.result + '" class="file-preview-img"></div>' +
                            '<div class="file-name" title="' + file.name + '">' + file.name + '</div>' +
                            '</div>');
                    };
                    reader.readAsDataURL(file);
                } else {
                    // 根据文件类型显示对应图标
                    if (file.name.endsWith('.xls') || file.name.endsWith('.xlsx') || file.type.indexOf('spreadsheet') !== -1) {
                        fileIcon = 'excel';
                        iconClass = 'fas fa-file-excel';
                    } else if (file.name.endsWith('.pdf') || file.type.indexOf('pdf') !== -1) {
                        fileIcon = 'pdf';
                        iconClass = 'fas fa-file-pdf';
                    } else if (file.name.endsWith('.doc') || file.name.endsWith('.docx') || file.type.indexOf('word') !== -1) {
                        fileIcon = 'word';
                        iconClass = 'fas fa-file-word';
                    }

                    $("#batchReportPreview").append('<div class="file-item">' +
                        '<div class="file-remove" onclick="clearBatchReportFile()"><i class="layui-icon">&#x1006;</i></div>' +
                        '<div class="file-icon ' + fileIcon + '"><i class="' + iconClass + '"></i></div>' +
                        '<div class="file-name" title="' + file.name + '">' + file.name + '</div>' +
                        '</div>');
                }
            }
        });
        
        // 包装图片文件选择事件
        $('#packagingImgFile').change(function() {
            var file = this.files[0];
            if (file) {
                // 验证文件类型，只允许图片
                if (!file.type.startsWith('image/')) {
                    layer.msg('请选择图片文件！', {icon: 2});
                    $(this).val('');
                    return;
                }
                
                // 显示图片预览
                $("#packagingImgPreview").html('');
                var reader = new FileReader();
                reader.onload = function (e) {
                    $("#packagingImgPreview").append('<div class="file-item">' +
                        '<div class="file-remove" onclick="clearPackagingImgFile()"><i class="layui-icon">&#x1006;</i></div>' +
                        '<div class="file-icon"><img src="' + e.target.result + '" class="file-preview-img"></div>' +
                        '<div class="file-name" title="' + file.name + '">' + file.name + '</div>' +
                        '</div>');
                };
                reader.readAsDataURL(file);
            }
        });
    });

    // 清除型式检验报告文件
    function clearTypeReportFile() {
        layui.use(['jquery', 'layer'], function () {
            var $ = layui.$;
            var layer = layui.layer;
            layer.confirm('确定要移除这个文件吗？', function (index) {
                $("#typeReportPreview").html('');
                $("#typeReportFile").val('');
                layer.close(index);
            });
        });
    }

    // 移除已上传的型式检验报告文件
    function removeTypeReportFile() {
        layui.use(['jquery', 'layer'], function () {
            var $ = layui.$;
            var layer = layui.layer;
            layer.confirm('确定要移除这个文件吗？', function (index) {
                $("#typeReportPreview").html('');
                $("#typeReportFile").val('');
                layer.close(index);
            });
        });
    }

    // 清除批次检验报告文件
    function clearBatchReportFile() {
        layui.use(['jquery', 'layer'], function () {
            var $ = layui.$;
            var layer = layui.layer;
            layer.confirm('确定要移除这个文件吗？', function (index) {
                $("#batchReportPreview").html('');
                $("#batchReportFile").val('');
                layer.close(index);
            });
        });
    }

    // 移除已上传的批次检验报告文件
    function removeBatchReportFile() {
        layui.use(['jquery', 'layer'], function () {
            var $ = layui.$;
            var layer = layui.layer;
            layer.confirm('确定要移除这个文件吗？', function (index) {
                $("#batchReportPreview").html('');
                $("#batchReportFile").val('');
                layer.close(index);
            });
        });
    }

    // 清除包装图片文件
    function clearPackagingImgFile() {
        layui.use(['jquery', 'layer'], function () {
            var $ = layui.$;
            var layer = layui.layer;
            layer.confirm('确定要移除这个文件吗？', function (index) {
                $("#packagingImgPreview").html('');
                $("#packagingImgFile").val('');
                layer.close(index);
            });
        });
    }

    // 移除已上传的包装图片文件
    function removePackagingImgFile() {
        layui.use(['jquery', 'layer'], function () {
            var $ = layui.$;
            var layer = layui.layer;
            layer.confirm('确定要移除这个文件吗？', function (index) {
                $("#packagingImgPreview").html('');
                $("#packagingImgFile").val('');
                layer.close(index);
            });
        });
    }

    // 返回按钮点击事件
    document.getElementById("rollback").addEventListener("click", function() {
        window.history.back(); // 返回上一页
    });
    
    // 备用提交方法 - 直接绑定到按钮点击事件
    $("#formBtn").click(function(e) {
        // 如果Layui的表单监听器没有处理，则使用备用方法
        setTimeout(function() {
            if (!$("#formBtn").attr("disabled")) {
                // 说明Layui没有处理，使用备用提交方法
                var formElement = document.querySelector('form');
                if (formElement) {
                    // 验证表单
                    var isValid = validateForm();
                    if (isValid) {
                        // 显示加载动画
                        layer.load(1, {
                            shade: [0.1, '#fff']
                        });
                        $("#formBtn").attr("disabled", true);
                        formElement.submit();
                    }
                }
            }
        }, 100);
    });
    
    // 表单验证函数
    function validateForm() {
        var productName = $('input[name="productName"]').val();
        var approvalNumber = $('input[name="approvalNumber"]').val();
        var specification = $('input[name="specification"]').val();
        var dosageForm = $('input[name="dosageForm"]').val();
        var healthFunction = $('input[name="healthFunction"]').val();
        var enterpriseStandard = $('input[name="enterpriseStandard"]').val();
        var applicationMaterials = $('input[name="applicationMaterials"]').val();
        var revisionStatus = $('input[name="revisionStatus"]').val();
        
        // 检查必填字段
        if (!productName || !approvalNumber || !specification || !dosageForm || 
            !healthFunction || !enterpriseStandard || !applicationMaterials || !revisionStatus) {
            layer.msg('请填写所有必填字段！', {icon: 2});
            return false;
        }
        
        // 检查是否至少上传了一个文件
        var hasTypeReport = $('#typeReportFile')[0].files.length > 0 || $('#typeReportPreview .file-item').length > 0;
        var hasBatchReport = $('#batchReportFile')[0].files.length > 0 || $('#batchReportPreview .file-item').length > 0;
        var hasPackagingImg = $('#packagingImgFile')[0].files.length > 0 || $('#packagingImgPreview .file-item').length > 0;
        
        if (!hasTypeReport || !hasBatchReport || !hasPackagingImg) {
            layer.msg('请上传所有必需的文件和图片！', {icon: 2});
            return false;
        }
        
        return true;
    }
</script>
</body>
</html>
